<template>
    <div class="flex flex-col gap-2 p-8">
        <div class="flex flex-row justify-between items-center mb-4">
            <div class="text-lg font-semibold text-black-100">新增
                <span class="text-sm">用户</span>
            </div>
        </div>
        <n-form class="bg-gray-50 p-8 rounded-lg" ref="formRef" :label-width="80" :model="formValue" :rules="rules"
            size="small">
            <n-form-item label="姓名" path="name">
                <n-input v-model:value="formValue.name" placeholder="输入姓名" />
            </n-form-item>
            <n-form-item label="邮箱" path="email">
                <n-input v-model:value="formValue.email" placeholder="输入邮箱" />
            </n-form-item>
            <n-form-item label="密码" path="password">
                <n-input v-model:value="formValue.password" placeholder="输入密码" />
            </n-form-item>
            <n-form-item>
                <n-button attr-type="button" @click="handleValidateClick">
                    注册
                </n-button>
            </n-form-item>
        </n-form>
    </div>

</template>

<script setup>

import { defineComponent, ref } from "vue";
import { CreateUser } from "../../wailsjs/go/main/App.js"
import { useMessage } from "naive-ui";
import { useRouter } from "vue-router";
const router = useRouter();
const message = useMessage();

const formRef = ref();

const formValue = ref({
    name: "",
    email: "",
    password: "",
})
const rules = {
    name: {
        required: true,
        message: "请输入姓名",
        trigger: "blur"
    },
    email: {
        required: true,
        message: "请输入邮箱",
        trigger: ["input", "blur"]
    },
    password: {
        required: true,
        message: "请输入密码",
        trigger: ["input", "blur"]
    },
}

const handleValidateClick = (e) => {
    e.preventDefault();
    formRef.value?.validate((errors) => {
        if (!errors) {
            CreateUser(formValue.value.name, formValue.value.email, formValue.value.password).then(res => {
               router.push({name: "users"});
            })
        } else {
            console.log(errors);
            message.error("Invalid");
        }
    });
}

</script>